<template>
  <div class="video-wrapper">
    <video
      id="video"
      ref="videoPlay"
      :autoplay="true"
      controls
      style="width:100%;"
    />
    <!-- 选择视频 -->
    <el-select
      v-model="videoUrl"
      placeholder="视频列表"
      class="video-change"
      size="small"
      @change="videoChange"
    >
      <el-option
        v-for="(item, index) in urlOptions"
        :key="item.value"
        :label="pre + (index + 1)"
        :value="item.value"
      >
        <span style="float: left;">{{ pre + (index + 1) }}</span>
        <span
          style="float: right; color: #CC3300; font-size: 13px"
          @click.stop="deleteVideo(item.id)"
        >
          <svg-icon icon-class="trash" />
        </span>
      </el-option>
    </el-select>
  </div>
</template>

<script>
import videoinit from '@/utils/video-init.js'
export default {
  name: 'MyVideo',
  props: {
    urlOptions: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      span: 24,
      pre: '实时视频_',
      count: 0,
      videoUrl: '',
      EZUIKit: null,
      activeIndex: 0,
      src: ''
    }
  },
  watch: {
    urlOptions: {
      handler(newValue) {
        this.videoUrl = newValue[0].value
        // newValue.forEach((item, index) => {
        //   item.label = this.pre + index
        // })
        videoinit.init().then(EZUIKit => {
          this.EZUIKit = EZUIKit
          this.$refs.videoPlay.src = newValue[0].value
          // this.src = newValue[0].value
          this.videoId = newValue[0].id
          this.player = new EZUIKit.EZUIPlayer('video')
          this.player.on('log', this.logFunc)
        })
      },
      deep: true
    }
  },
  methods: {
    logFunc(str) {
      console.log(JSON.stringify(str))
    },
    videoChange(src) {
      const EZUIKit = this.EZUIKit
      this.player.stop()
      this.$nextTick(() => {
        this.$refs.videoPlay.src = src
        this.player = new EZUIKit.EZUIPlayer('video')
        this.player.on('log', this.logFunc)
      })
    },
    deleteVideo(videoId) {
      this.$confirm('确定删除此视频吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$emit('delete-video', videoId)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    }
  }
}
</script>

<style scoped lang="scss">
// .el-select-dropdown__list {
//   padding: 0 !important;
// }

.el-select-dropdown__item {
  // height: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 20px;
}

.video-wrapper {
  position: relative;
  video {
    box-shadow:0 0 10px 0 #999;
    border-radius:8px;
  }
  .video-change {
    position: absolute;
    top: 10px;
    right: 10px;
    opacity: 0.6;
    &:hover {
      opacity: 1;
    }
  }
}

.video_list_wrapper {
  .title {
    font-weight:bolder;
  }
  .video_list {
    padding-top: 20px;
    > div {
      margin-bottom:10px;
      border: 1px solid #aaa;
      color:#aaa;
      padding:8px 5px;
      cursor:pointer;
      display: flex;
      justify-content: space-between;
      > #trash {
        cursor: pointer;
        &:hover {
          color:red;
        }
      }
    }
    .active {
      color:#409EFF;
      border-color: #409EFF;
      cursor:not-allowed;
    }
    > div:hover {
      color:#409EFF;
      border-color: #409EFF;
    }
  }
}

</style>
